<template>
  <n-modal v-model:show="modelValue.toMove" :mask-closable="false" preset="dialog" title="确认" content="你确认"
    positive-text="确认" negative-text="算了" @positive-click="onPositiveClick" @negative-click="modelValue.toMove = false">
    原来的领域
    <n-tree-select v-model:value="modelValue.oldFieldId" :options="fieldSelect" filterable
      :disabled="modelValue.toMove" />
    原来的阶段
    <n-select v-model:value="modelValue.oldStageId" :options="oldStageSelect" filterable :disabled="modelValue.toMove" />
    请选择领域
    <n-tree-select v-model:value="modelValue.fieldId" @update:value="
      modelValue.stageId = null;
    getStageSelectFromBack(modelValue.fieldId)
      " :options="fieldSelect" filterable />
    请选择阶段
    <n-select v-model:value="modelValue.stageId" :options="stageSelect" filterable />
    <!--    {{modelValue}} {{oldStageSelect}} {{stageSelect}}-->
  </n-modal>
</template>
<script lang="ts" setup>
import { NModal, useMessage } from "naive-ui";
import { computed, onMounted, ref, watch } from "vue";
import { post, Response } from "@/api/http";
import { getFieldSelect, getGoalSelect, getStageSelect, moveStage, moveTask } from "@/api/url";
import useUserStore from "@/store/modules/user";

// 全局数据
const message = useMessage();
const userStore = useUserStore()

// 父组件数据
const props = defineProps<{
  modelValue: {
    id: number
    toMove: boolean
    stageId: number | null
    fieldId: number
    oldStageId: number
    oldFieldId: number
    [key: string]: any
  }
}>();
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val),
});

const fieldSelect = ref<Array<any>>([]);
const stageSelect = ref<Array<any>>([]);
const oldStageSelect = ref<Array<any>>([]);
const getStageSelectFromBack = async (id: number | null) => {
  if (id) {
    console.log(id)
    try {
      const data: Response = await post({
        url: getStageSelect,
        data: { id: id },
        token: userStore.getToken()
      });
      // console.log(data)
      stageSelect.value = data.data.data
      // stageSelect.push(...)
      console.log(data.data.data)
    } catch (e) {
      message.error((e as Error).message)
    } finally {
    }
  }
}
const getGoalAndFieldSelect = async () => {
  try {
    const data: Response = await post({
      url: getFieldSelect,
      token: userStore.getToken()
    });
    // console.log(data)
    fieldSelect.value = data.data.data
    // console.log(fieldSelect)
  } catch (e) {
    message.error((e as Error).message)
  } finally {
  }
  if (modelValue.value.oldFieldId === modelValue.value.fieldId)
    await getStageSelectFromBack(modelValue.value.oldFieldId)
  oldStageSelect.value = [...stageSelect.value]
}
watch(modelValue.value, getGoalAndFieldSelect)
const onPositiveClick = async () => {
  if (modelValue.value.stageId === null)
    message.error("阶段不可为空")
  else if (modelValue.value.stageId === modelValue.value.oldStageId)
    message.error('未发生变化')
  else {
    try {
      const data: Response = await post({
        url: moveTask,
        data: { id: modelValue.value.id, newStageId: modelValue.value.stageId },
        token: userStore.getToken()
      });
    } catch (e) {
      message.error((e as Error).message)
    } finally {
    }
  }

};

// 任务栏选项

</script>
